<template>
  <div>
    <el-drawer
    v-model="dialogVisible"
    :title="dialogStatus==='create'?'新增': (dialogStatus === 'view' ? '查看' : '编辑')"
    @close="reset"
  >
    <div class="scene-dialog">
      <el-form 
        ref="articleFormRef"
        :model="tableItem" 
        :rules="rules"
        label-width="100"
        label-position="top"
      >
        <el-form-item label="模板名称" prop="templateName">
          <el-input v-model="tableItem.templateName" />
        </el-form-item>

        <el-form-item label="所属组织" prop="orgId">
          <org-tree-select v-model="tableItem.orgId" />
        </el-form-item>
      
        <el-form-item label="模板描述" prop="templateDes">
          <el-input v-model="tableItem.templateDes" />
        </el-form-item>

        <el-form-item label="采集协议名称" prop="protocolName">
          <el-select v-model="tableItem.protocolName" placeholder="请选择">
            <el-option label="Modbus-RTU" value="Modbus-RTU" />
            <el-option label="Modbus-TCP" value="Modbus-TCP" />
            <el-option label="DLT645-07" value="DLT645-07" />
            <el-option label="DLT645-97" value="DLT645-97" />
          </el-select>
        </el-form-item>
        <el-form-item label="协议类型" prop="protocolType">
          <el-select v-model="tableItem.protocolType" placeholder="请选择">
            <el-option label="串口" value="串口" />
            <el-option label="TCP/IP" value="TCP/IP" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
      
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="dialogStatus==='create'?createData():updateData()"
        >提交</el-button>
      </span>
    </template>
    </el-drawer>
  </div>


</template>
<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { addTemplate, editTemplate } from '@/api/collect'
import { validate } from '@/utils/validate'
import useStore from '@/store';
import OrgTreeSelect from '@/components/OrgTreeSelect/index.vue'

// 所属组织
const { user } = useStore()
const projectList = computed<{organizationId: string, organizationName:string}[]>(() => user.projectOption as any)


const tableItem = reactive({
  templateName: '',
  orgId: null,
  templateDes: '',
  protocolName: '',
  protocolType: '',
})

const rules = reactive({
  templateName: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
  orgId: [{ required: true, message: '请选择组织', trigger: 'change' }],
})

const dialogVisible = ref(false)
const dialogStatus = ref('create')

const reset = () => {
  if (!articleFormRef) return
  articleFormRef.value.resetFields()
}

const articleFormRef = ref(null)

const emit = defineEmits(['listChange'])

const createData = async () => {
  const valid = await validate(articleFormRef)
  if (valid) {
    addTemplate(tableItem)
    .then(() => {
      // TODO use res data
      emit('listChange')
      dialogVisible.value = false
      ElMessage.success('创建成功！')
    })
    .catch(() => {
      dialogVisible.value = false
      ElMessage.error('创建失败！')
    })
  }
}

const updateData = async () => {
  const valid = await validate(articleFormRef)
  if (valid) {
    editTemplate(tableItem)
    .then(() => {
      // TODO use res data
      emit('listChange')
      dialogVisible.value = false
      ElMessage.success('更新成功！')
    })
    .catch(() => {
      dialogVisible.value = false
      ElMessage.error('更新失败！')
    })
  }
}

defineExpose({ dialogVisible, tableItem, dialogStatus, reset })

</script>
<style lang="scss" scoped>
:deep(.el-drawer__header) {
  margin-bottom: 20px;
}
:deep(.el-drawer__body) {
  padding-top: 0px;
}
:deep(.el-drawer__footer) {
  text-align: center;
}
.scene-dialog {

}
</style>
